<template>
  <ContentWrap>
    <Search :schema="searchSchema" title-width="68px">
      <template #actionMore>
         <el-button type="success" plain @click="handleMachineNoImport">
          <Icon icon="ep:upload" /> 航班动态
        </el-button>
      </template>
    </Search>
  </ContentWrap>
  <ContentWrap>
    <TableV2
      :data="tableData"
      :columns="tableColumns"
      :loading="loading"
      height="52vh"
      :table-set-props="{
        fixed: true,
        rowKey: 'id',
        rowHeight: 70,
      }"
    />
  </ContentWrap>
   <MachineNoImportForm ref="importMachineNoFormRef" @success="loadData" />
</template>

<script lang="tsx" setup>
import { ref, withKeys } from 'vue'
import { ElCheckbox } from 'element-plus'
import { CheckboxValueType } from 'element-plus'
import { ElInput } from 'element-plus'
import { ElTimePicker } from 'element-plus'
import { DictTag } from '@/components/DictTag'
import MachineNoImportForm from '../schedule/MachineNoImportForm.vue'

const searchSchema = ref<any[]>([
  {
    key: 'flightCrew',
    title: '车型',
    component: 'Select',
    componentProps: {
      placeholder: '请输入车型',
      clearable: true,
      options: [
        { title: 'A320', value: 'A320' },
        { title: 'B737', value: 'B737' },
        { title: 'B787', value: 'B787' }
      ]
    }
  },
  {
    key: 'inboundFlight',
    title: '进港航班',
    component: 'Input',
    componentProps: {
      placeholder: '请输入进港航班',
      clearable: true
    }
  },
  {
    key: 'preLandingTime',
    title: '预落时间',
    component: 'TimePicker',
    componentProps: {
      placeholder: '请输入预落时间',
      clearable: true,
      format: 'HH:mm',
      valueFormat: 'HH:mm'
    }
  },
  {
    key: 'inboundTime',
    title: '实落时间',
    component: 'TimePicker',
    componentProps: {
      placeholder: '请输入实落时间',
      clearable: true,
      format: 'HH:mm',
      valueFormat: 'HH:mm'
    }
  },
  {
    key: 'depTime',
    title: '起飞时间',
    component: 'TimePicker',
    componentProps: {
      placeholder: '请输入起飞时间',
      clearable: true,
      format: 'HH:mm',
      valueFormat: 'HH:mm'
    }
  },
  {
    key: 'flightNo',
    title: '航班号',
    component: 'Input',
    componentProps: {
      placeholder: '请输入航班号',
      clearable: true
    }
  },
  {
    key: 'machineNo',
    title: '机号',
    component: 'Input',
    componentProps: {
      placeholder: '请输入机号',
      clearable: true
    }
  },
  {
    key: 'recordDate',
    title: '记录日期',
    component: 'DatePicker',
    componentProps: {
      placeholder: '选择记录日期',
      valueFormat: 'YYYY-MM-DD',
      clearable: true,
      type: 'date'
    }
  }
])

const InputCell = ({ value, onChange, onBlur, onKeydownEnter, forwardRef, key }) => {
  return (
    <ElInput
      ref={forwardRef as any}
      key={key}
      onInput={onChange}
      onBlur={onBlur}
      onKeydown={withKeys(onKeydownEnter, ['enter'])}
      modelValue={value}
    />
  )
}

const InputCellRender = ({ rowData, column }) => {
  const editKey = '_' + column.dataKey;
  const onChange = (value: string) => {
    rowData[column.dataKey!] = value
  }
  const onEnterEditMode = () => {
    rowData[editKey] = true
  }

  const onExitEditMode = () => (rowData[editKey] = false)
  const input = ref()
  const setRef = (el) => {
    input.value = el
    if (el) {
      el.focus?.()
    }
  }

  return rowData[editKey] ? (
    <InputCell
      key="write"
      forwardRef={setRef}
      value={rowData[column.dataKey!]}
      onChange={onChange}
      onBlur={onExitEditMode}
      onKeydownEnter={onExitEditMode}
    />
  ) : (
    <ElInput
      key="readonly"
      modelValue={rowData[column.dataKey]}
      readonly={true}
      onClick={onEnterEditMode}
    ></ElInput>
  )
}

const TimerPickerCell = ({ value, handleChange, onBlur, forwardRef }) => {
  return (
    <ElTimePicker
      ref={forwardRef}
      modelValue={value}
      onChange={handleChange}
      onUpdate:modelValue={handleChange}
      onBlur={onBlur}
      format="HH:mm"
      value-format="HH:mm"
      editable={true}
    />
  )
}

const TimerPickerCellRender = ({ rowData, column }) => {
  const editKey = '_' + column.dataKey;
  const onChange = (value: string) => {
    rowData[column.dataKey!] = value
    column.editing = false
  }
  const onEnterEditMode = () => {
    rowData[editKey] = true
  }

  const onExitEditMode = () => {
    rowData[editKey] = false
  }
  const pickerRef = ref()
  const setRef = (el) => {
    pickerRef.value = el
    if (el) {
      el.focus?.()
      el.handleOpen?.()
    }
  }

  return rowData[editKey] ? (
    <TimerPickerCell
      forwardRef={setRef}
      value={rowData[column.dataKey!]}
      handleChange={onChange}
      onBlur={onExitEditMode}
    />
  ) : (
    <ElInput
      modelValue={rowData[column.dataKey]}
      readonly={true}
      onClick={onEnterEditMode}
    ></ElInput>
  )
}

const tableColumns: any[] = [
  {
    type: 'index',
    title: '序号',
    width: 50,
    cellRenderer: ({ rowIndex }) => {
      return <span>{rowIndex + 1}</span>
    }
  },
  {
    title: '配餐日期',
    key: 'recordDate',
    dataKey: 'recordDate',
    width: 100
  },
  {
    title: '航空公司',
    dataKey: 'airlineComp',
    key: 'airlineComp',
    width: 120,
    cellRenderer: ({ cellData }) => {
      return <DictTag type={DICT_TYPE.PPLAN_AIRLINE_ID} value={cellData}></DictTag>
    }
  },
  {
    title: '机型',
    dataKey: 'airlinePattern',
    key: 'airlinePattern',
    width: 120
  },
  {
    title: '进港航班',
    key: 'inboundFlight',
    dataKey: 'inboundFlight',
    width: 120
  },
  {
    title: '航班号',
    key: 'flightNo',
    dataKey: 'flightNo',
    width: 120
  },
  {
    title: '机号',
    key: 'machineNo',
    dataKey: 'machineNo',
    width: 120
  },
  {
    title: '机位',
    key: 'airportStands',
    dataKey: 'airportStands',
    width: 120
  },
  {
    title: '航线',
    key: 'route',
    width: 120,
    dataKey: 'route'
  },
  // {
  //   title: '航站',
  //   key: 'terminal',
  //   width: 120
  // },
  {
    title: '落地时间',
    key: 'preLandingTime',
    dataKey: 'preLandingTime',
    width: 120,
    fixed: 'right',
    align: 'center',
    cellRenderer: InputCellRender
  },
  {
    title: '起飞时间',
    key: 'depTime',
    dataKey: 'depTime',
    width: 120,
    fixed: 'right',
    align: 'center',
    cellRenderer: TimerPickerCellRender
  },
  {
    title: '回港时间',
    key: 'arrTime',
    dataKey: 'arrTime',
    width: 120,
    fixed: 'right',
    align: 'center',
     cellRenderer: TimerPickerCellRender
  },
  {
    title: '回位时间',
    key: 'huiWei',
    dataKey: 'huiWei',
    width: 120,
    fixed: 'right',
    align: 'left',
    cellRenderer: TimerPickerCellRender
  },
  {
    title: '车型',
    dataKey: 'flightCrew',
    key: 'flightCrew',
    width: 120
  }
  // {
  //   title: '航机员',
  //   key: 'crewMembers',
  //   width: 120
  // }
]
const loading = ref(false)

const tableData = ref([] as any[])
/** 航班动态导入 */
const importMachineNoFormRef = ref()

const SelectionCell = ({ value, intermediate = false, onChange }) => {
  return <ElCheckbox onChange={onChange} modelValue={value} indeterminate={intermediate} />
}

tableColumns.unshift({
  key: 'selection',
  width: 30,
  cellRenderer: ({ rowData }) => {
    const onChange = (value: CheckboxValueType) => (rowData.checked = value)
    return <SelectionCell value={rowData.checked} onChange={onChange} />
  },
  headerCellRenderer: () => {
    const _data = unref(tableData)
    const onChange = (value: CheckboxValueType) =>
      (tableData.value = _data.map((row) => {
        row.checked = value
        return row
      }))
    const allSelected = _data.every((row) => row.checked)
    const containsChecked = _data.some((row) => row.checked)

    return (
      <SelectionCell
        value={allSelected}
        intermediate={containsChecked && !allSelected}
        onChange={onChange}
      />
    )
  }
})


const handleMachineNoImport = () => {
  importMachineNoFormRef.value.open()
}


const loadData = async ()=>{}

tableData.value = Array.from({ length: 10 }).map((elem) => ({
  id: Math.random(),
  depTime: '12:12'
}))
</script>
